<template>
	<view>
		<view style="min-height: 44px">
			<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="个人中心"
				:placeholder="true" :autoBack="true"></u-navbar>
		</view>
		<view class="note">

		</view>
		<view class="" style="position: relative;z-index: 1;width: 93%;margin: 0 auto;padding-top: 15px;">
			<!-- <u-sticky offset-top="0"> -->
			<view class="box" style="position: relative;">
				<view class="" style="padding: 22px 15px 0;">
					<view class="flex" style="justify-content: space-between;">
						<view class="">
							<view style="font-size: 12px; font-weight: 400; color: #E3ECFF">
								钱包余额
							</view>
							<view style="font-size: 24px; color: #ffffff; font-weight: 400; margin-top: 5px">
								{{ me_info.money }}
							</view>
							<view class="flex" style="margin-top: 10px">
								<view class="flex" style="margin-right: 40px">
									<view style="color: #fff; font-size: 12px">提现中</view>
									<view style=" font-size: 12px; font-weight: 400; color: #fbccca;margin-left: 10px;">
										￥{{ me_info.settlement }}
									</view>
								</view>
								<view class="flex">
									<view style="color: #fff; font-size: 12px">已提现</view>
									<view style=" font-size: 12px; font-weight: 400; color: #fbccca;margin-left: 10px;">
										￥{{ me_info.settled }}
									</view>
								</view>
							</view>
						</view>
						<view class="flex"
							style="background: #FFFFFF;border-radius: 42px 42px 42px 42px;padding: 3px 10px;justify-content: center;">
							<view @click="withdrawal" class="tit"
								style="color: #3170FD;font-size: 12px;    line-height: 18px;">去提现</view>
					
						</view>
					</view>
				</view>
				<view class="flex" style="justify-content: space-around;position: absolute;bottom: 5px;width: 100%;">

					<!-- <view class="line">——</view> -->
					<view @click="edit_account" class="flex">
						<image style="width: 16px;height: 16px;margin-right: 5px;" src="/static/font/29.png" mode="">
						</image>
						<view class="tits">更改账户</view>

					</view>
					<view class="line"></view>
					<view @click="records" class="flex">
						<image style="width: 16px;height: 16px;margin-right: 5px;" src="/static/font/28.png" mode="">
						</image>
						<view class="tits">提现记录</view>

					</view>
				</view>
			</view>
			<!-- </u-sticky> -->

			<view style="padding: 0 15px;margin-top: 15px;">
				<view style="font-size: 16px; font-weight: bold; color: #1d1f20; padding-bottom: 10px">资金变动记录</view>
				<view v-for="(it, i) in listdata" :key="i" class="flex"
					style="padding: 13px 15px; justify-content: space-between;background-color: #fff;box-shadow: 0px 2 5px 0px rgba(0,0,0,0.05);
						border-radius: 8px 8px 8px 8px;margin-top: 15px;">
					<view>
						<view style="font-size: 14px;color: #333333;">{{ it.memo }}</view>
						<view style="font-size: 12px; margin-top: 5px;color: #666;">
							{{ $u.timeFormat(it.createtime, 'yyyy-mm-dd hh:MM:ss') }}
						</view>
					</view>
					<view>
						<view v-if="it.fuhao == '-'"
							style="font-size: 14px; font-weight: bold; color: #24ce68;  text-align: right">
							<!-- <text>-</text> -->
							<text>{{ it.money }}</text>
						</view>
						<view v-else
							style="font-size: 14px; font-weight: bold; color: #ff3331;  text-align: right">
							<text>+</text>
							<text>{{ it.money }}</text>
						</view>
						<view style="font-size: 12px; font-weight: 500; color: #1d1f20;text-align: right;margin-top: 3px;">{{ it.after }}</view>
						
					</view>
				</view>
			</view>
		</view>
		<u-modal @close="show = false" :closeOnClickOverlay="true" confirmColor="#fff" confirmText="联系客服"
			confirmButtonShape="circle" :show="show" :title="title" :content="content">
			<view slot="confirmButton">
				<u-button @click="perfect" shape="circle" type="primary" text="确定"></u-button>
			</view>
		</u-modal>
		<u-loadmore v-if="shows" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'transparent',
				show: false,
				title: '温馨提示',
				content: '需要完善个人信息后才可以提现哦',
				listdata: [],
				date_info: [],
				page: 1,
				limit: 15,
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				shows: false,
				me_info: '',
			};
		},
		onReachBottom() {
			this.shows = true;
			if (this.date_info == '') return;
			this.status = 'loading';
			this.page = ++this.page;
			this.list();
		},
		onShow() {
			this.listdata = [];
			this.list();
			this.info();
		},
		methods: {
			async info() {
				let res = await this.$http.index.my_index();
				if (res.code == 1) {
					this.me_info = res.data.userinfo;
				}
			},
			async list() {
				let res = await this.$http.index.moneyLogList({
					page: this.page,
					limit: this.limit,
				});
				console.log(res);
				if (res.code == 1) {
					this.date_info = res.data;
					setTimeout(() => {
						if (this.date_info == '') this.status = 'nomore';
						else this.status = 'loading';
					}, 1000);
					this.listdata = [...this.listdata, ...this.date_info];
				}
			},
			//提现资料
			records() {
				uni.navigateTo({
					url: '/pages/me/records',
				});
			},
			//完善资料
			perfect() {
				this.show = false;
				if (this.types == 1) {
					uni.navigateTo({
						url: '/pages/me/real_name',
					});
				} else if (this.types == 2) {
					uni.navigateTo({
						url: '/pages/me/account',
					});
				} else {
					uni.navigateTo({
						url: '/pages/me/bank?ali_code=' +
							encodeURIComponent(JSON.stringify(this.userinfo.alipay_account)) +
							'&ali_name=' +
							encodeURIComponent(JSON.stringify(this.userinfo.alipay_realname)),
					});
				}
			},

			withdrawal() {
				let user = this.me_info;
				if (user.authentication == '0') {
					this.content = '请先实名认证';
					this.types = 1;
					this.show = true;
				} else if (user.alipay_account == '') {
					this.content = '请先绑定支付宝账号';
					this.types = 2;
					this.show = true;
				} else if (user.bank_card == '') {
					this.content = '请先绑定银行卡';
					this.types = 3;
					this.show = true;
				} else {
					uni.navigateTo({
						url: '/pages/me/now_withdrawal',
					});
				}
			},
			edit_account() {
				uni.navigateTo({
					url: '/pages/me/real_name',
				});
			},
		},
	};
</script>
<style>
	page{
		background-color: #F9F9FB;
	}
</style>
<style scoped lang="scss">
	/deep/ .u-sticky {
		top: 0 !important;
	}

	/deep/ .u-button--primary {
		background-color: #ff3331;
		border-color: #ff3331;
	}

	/deep/ .u-modal__content__text {
		text-align: center;
	}

	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: 100% 100%;
	}

	.line {
		width: 1px;
		height: 10px;
		background: #D8D8D8;
		border-radius: 0px 0px 0px 0px;
	}

	.box {
		background-image: url('@/static/font/27.png');
		background-size: 100%;
		background-repeat: no-repeat;
		
		height: 157px;
		// margin-top: 52px;
	}

	.mao {
		background-color: rgba(255, 190, 185, 0.5);
		right: 0;
		backdrop-filter: blur(3px); //毛玻璃属性

		top: 40%;
		margin-right: 20px;
	}

	.tit {
		color: #fff;
	}

	.tits {
		font-size: 12px;
		font-weight: 400;
		background: linear-gradient(180deg, #F8E5C0 0%, #B88B47 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>